<template>
    <div class="address">
        <h1>
            <span>我的收货地址</span>
            <el-button type="default" @click="addAddress">添加地址</el-button>
        </h1>
        <div class="table">
            <el-table :data="addressArr" style="width: 100%" height="500">
                <el-table-column prop="name" label="收货人" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="电话/手机" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="400">
                </el-table-column>
                <!-- <el-table-column prop="isDefault" label="邮编">
                </el-table-column> -->
                <el-table-column prop="" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="handleDele(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="isDefault" label="移动设置">
                    <template slot-scope="scope">
                        <span class="default" v-if="scope.row.isDefault == 1">默认地址</span>

                        <span class="is-default" @click="handleDefault(scope.row)" v-else>设为默认</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <AddAddress></AddAddress>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import AddAddress from '../../components/add_address/index.vue'
// import addAddress from './add_address/index.vue'
export default {
    name: 'Address',
    components: {
        AddAddress
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            tableData: [],
            text: ''
        }
    },
    computed: {
        ...mapState('addressStore', ['addressArr'])
    },
    watch: {

    },
    mounted() {
        this.getAddressList()
    },
    methods: {
        ...mapMutations('addressStore', ['getAddressList', 'setDefault', 'deleteAddress']),
        addAddress() {
            const obj = {
                true: true,
                title: '添加新地址'
            }
            this.$bus.$emit('add', obj)
        },
        handleEdit(row) {
            if (row.isDefault == 1) {
                row.isDefault = true
            } else {
                row.isDefault = false
            }
            const obj = {
                title: '修改地址',
                true: true,
                row: row
            }
            // let edit = '修改地址'
            this.$bus.$emit('add', obj)

        },
        handleDefault(row) {
            this.setDefault(row)
        },
        handleDele(row) {
            this.deleteAddress(row.id)
        }
    }
};
</script>
<style lang='less' scoped>
.address {
    width: 70%;
    margin: 0 auto;

    /* 针对整个页面的滚动条 */
    ::-webkit-scrollbar {
        display: none;
        /* 对于Webkit浏览器 */
    }

    /* 针对Table的滚动条 */
    .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
        /* 对于Webkit浏览器 */
    }

    .el-table__body-wrapper {
        -ms-overflow-style: none;
        /* 对于IE和Edge */
        scrollbar-width: none;
        /* 对于Firefox */
    }

    h1 {
        width: 100%;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            font-weight: bold;
        }
    }

    .is-default {
        font-size: 13px;
        cursor: pointer;
    }

    .default {
        color: salmon;
        padding: 2px;
        border: 1px solid rgba(255, 145, 0, 0.752);
        border-radius: 2px;
        font-size: 12px;
        background-color: rgba(250, 225, 192, 0.752);
    }
}
</style>